<template>
	<view class="formBox">
		<uni-forms ref="valiForm" :rules="rules" v-model="formData" label-position="top" label-width="150">
			<uni-forms-item label="巡检部分" required name="patrolPart">
				<uni-easyinput v-model="formData.patrolPart" placeholder="请输入" disabled />
			</uni-forms-item>
			<uni-forms-item label="巡检时间" required name="patrolTime">
				<uni-datetime-picker type="datetime" v-model="formData.patrolTime" />
			</uni-forms-item>
			<uni-forms-item label="巡检结果" required name="patrolResult">
				<uni-easyinput type="textarea" v-model="formData.patrolResult" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="存在问题" required name="existProblem">
				<uni-easyinput type="textarea" v-model="formData.existProblem" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="巡检人" required name="patrolUserIds">
				<template v-slot:label>
					<view class="myLabel">
						<view><text class="star">*</text>巡检人</view>
						<uni-icons type="plus-filled" size="30" color="#409EFF" @click="onSelUser" />
					</view>
				</template>
				<view :style="{
					color: formData.patrolNickNames ? '#555' : '#888', 
					marginTop: '10rpx'
				}">{{ formData.patrolNickNames || '点击右侧图标选择' }}</view>
			</uni-forms-item>
		</uni-forms>
		<button class="btn" type="primary" @click="onSubmit('valiForm')">提交</button>
	</view>
</template>

<script>
import useAppStore from '@/store/modules/app';
export default {
	props: {
		data: {
			type: Object,
			default: {}
		},
	},
	data() {
		return {
			// 表单数据
			formData: {
				patrolTime: '',
			},
			// 规则
			rules: {
				patrolResult: {
					rules: [{
						required: true,
						errorMessage: '请填写内容'
					}]
				},
				existProblem: {
					rules: [{
						required: true,
						errorMessage: '请填写内容'
					}]
				},
				patrolUserIds: {
					rules: [{
						required: true,
						errorMessage: '请选择内容'
					}]
				},
				patrolTime: {
					rules: [{
						required: true,
						errorMessage: '请选择时间'
					}]
				},
			},
            // store
            appStore: useAppStore()
		}
	},
    watch: {
        'formData.userId': {
            handler(newVal) {
                
            },
            immediate: false,
            deep: true
        },
    },
	created() { 
		// 数据合并
		this.formData = Object.assign({}, this.formData, this.data);
		this.formData.patrolTime = this.$util.timestampToTime(new Date().getTime());
		// 监听
		this.$bus.on('addUserData', res => {
            if (res && res.length !== 0) {
                this.formData.patrolUserIds = res.map(item => item.userId);
                this.formData.patrolNickNames = res.map(item => item.nickName).join();
            }
        });
	},
    unmounted() {
        this.$bus.off('addUserData');
    },
	methods: {
		// 提交
		onSubmit(ref) {
			this.$refs[ref].validate().then(res => {
				this.$emit('callback', {
					...this.formData,
					...res,
				});
			}).catch(err => {
				console.log('err', err);
			})
		},
		// 选择人员
		onSelUser() {
			let url = `/pages/user/select?multiple=1`;
			if (this.formData.patrolUserIds && this.formData.patrolUserIds.length !== 0) {
				// url参数
				let obj = {
					userIds: this.formData.patrolUserIds,
				}
				let str = this.$util.jsonToUrlParam(obj);
				url = `/pages/user/select?multiple=1&${str}`;
			}
			this.onLocation(url)
		},
        // 跳转页面
        onLocation(url) {
            uni.navigateTo({
                url
            });
        },
	},
}
</script>

<style lang="scss" scoped>
.formBox {
	padding: 60rpx 48rpx 100rpx;
	border-radius: 40rpx 40rpx 0 0;
	background: #fff;
	overflow: hidden;
	.uni-forms {
		min-height: 38vh;
	}
	.myLabel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .star {
            color: #dd524d;
        }
    }
}
</style>
